// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as *;

.option-list {
  --options-dropdown-icon-fg-color: var(--color-foreground-secondary);
  --options-dropdown-bg-color: var(--color-background-tertiary);
  --options-dropdown-outline-color: none;
  --options-dropdown-border-color: var(--color-background-quaternary);

  position: absolute;
  top: $sz-36;
  width: var(--dropdown-width, 100%);
  transform: translateX(var(--dropdown-translate-distance, 0));
  background-color: var(--options-dropdown-bg-color);
  border-radius: $br-8;
  border: $b-1 solid var(--options-dropdown-border-color);
  padding-block: var(--sp-xs);
  margin-block-end: 0;
  max-height: $sz-400;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--z-index-dropdown);
}

.left-align {
  left: 0;
}

.right-align {
  right: 0;
}

.option-separator {
  border: $b-1 solid var(--options-dropdown-border-color);
  margin-top: var(--sp-xs);
  margin-bottom: var(--sp-xs);
}

.group-option,
.option-empty {
  @include use-typography("body-small");
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  color: var(--color-foreground-secondary);
  padding-inline: var(--sp-s);
  height: var(--sp-xxxl);
}

.option-empty {
  justify-content: center;
  text-align: center;
  padding: 0 40px;
}
